<template>
  <div id="app-container">
    <div style="padding: 10px;background-color: #eee;">
      {{JSON.stringify(detail)}}
    </div>
    <button class="button--green" @click="$router.go(-1)">返回</button>
    <iframe :src="`/static/${detail.documentUrl}`" frameborder="0" scrolling="auto"></iframe>
  </div>
</template>

<script>
  export default {
    name: "Detail",
    async asyncData({$axios, params}) {
      const {data} = await $axios.request({
        method: 'get',
        url: `/api/document/get/${params.documentId}`,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      })
      return {detail: data.data}
    },
    // 动态数据集合
    data() {
      return {}
    },
    // 计算属性
    computed: {},
    // 监听器
    watch: {},
    // 页面组件渲染完成钩子
    mounted() {
      this.documentId = this.$route.params.documentId
    },
    // 方法集合
    methods: {}
  }
</script>

<style scoped lang="scss">
  #app-container {
    padding: 70px 0;
    height: 100vh;

    iframe {
      width: calc(100vw - 20px);
      height: calc(100vh - 270px);
      overflow: hidden;
      border: solid 1px #999;
      margin: auto;
    }

  }
</style>
